<template>
  <div>
    <div class="banner">
      <Banner />
    </div>
    <div class="tabs">
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in tabs.filter(item=>item.type==1)"
          :key="item.type+'-'+item.code"
          :label="item.label"
          :name="item.type+'-'+item.code">
        </el-tab-pane>
        <el-tab-pane
          v-for="item in tabs.filter(item=>item.type==2)"
          :key="item.type+'-'+item.code"
          :label="item.label"
          :name="item.type+'-'+item.code">
        </el-tab-pane>
      </el-tabs>
    </div>
    <div
      class="content"
      :hidden="!detailHidden"
    >
      <div class="div-center">
        <div class="automate-content">
          <div
            :class="automatecontent1(numbers.length)"
            v-for="(option, index) in numbers"
            :key="index"
            @click="showDetails(option.numbersNext.id)"
          >
            <!-- 下面是组件抽出来的部分 -->
            <div class="lunboPictures" >
              <div class="item">
                <div class="item-border">
                  <a href="javascript:;">
                    <img class="item-img" :src="option.src" alt="" />
                  </a>
                  <a href="javascript:;" class="item-word">{{ option.text }}</a>
                </div>
                <!-- <a href="javascript:;" class="item-word">{{ option.text }}</a> -->
              </div>
            </div>
          </div>
        </div>
        <div class="automate-fenyeqi">
          <div style="text-align: center;margin: 10px">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="this.pageData.total"
              :page-size="pageData.limit"
              @current-change="handelPage"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情页 -->
    <div :hidden="detailHidden" class="content-details">
      <el-card style="margin: 10px" shadow="always">
        <div>
          <div style="margin: 20px">
            <h3>{{ this.form.title }}</h3>
            <hr />
            <span style="color: #999999;font-size: 14px"
            ><i class="el-icon-time"></i>
              {{ new Date(this.form.dateTime).toLocaleDateString() }}</span
            >
            <hr />
          </div>
          <div class="details-content">
            <div class="details-content-left">
              <el-image
                :src="form.images!=null && form.images.length>0 ?form.images[imgCurrent]:''"
                fit="fill" class="image-pro-img"></el-image>
              <el-carousel :autoplay="false" @change="imageChange" :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="item in form.images" :key="item">
                  <el-image
                    :src="item"
                    fit="fill" class="image-pro"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div v-html="form.content" class="details-content-right">

            </div>
          </div>
          <hr />
          <div class="div-page">
            <span class="page-left">
              <a
                class="a-page"
                @click="
                  showDetails(form.upForm != null ? form.upForm.numbersNext.id : null)
                "
                href="#"
              >
                <i class="el-icon-arrow-left"></i> 上一篇：{{
                  this.form.upForm != null ? this.form.upForm.numbersNext.title : "没有了"
                }}
              </a>
            </span>
            <span class="page-right">
              <a
                class="a-page"
                @click="
                  showDetails(
                    form.bottomForm != null ? form.bottomForm.numbersNext.id : null
                  )
                "
                href="#"
              >
                下一篇：{{
                  this.form.bottomForm != null
                    ? this.form.bottomForm.numbersNext.title
                    : "没有了"
                }}
                <i class="el-icon-arrow-right"></i>
              </a>
            </span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
    import Banner from "../components/Banner.vue";
    export default {
        name: "Productcenter",
        data() {
            return {
                isSpacial:null,
                activeName: "1",
                index: 1,
                isshow: false,
                tabs: [
                    {
                        label: "环形穿梭车系统",
                        code: "1",
                        type:1,
                    },{
                        label: "高速分拣系统",
                        code: "2",
                        type:1,
                    }, {
                        label: "四向车系统",
                        code: "3",
                        type:1,
                    },{
                        label: "WMS",
                        code: "4",
                        type:1,
                    },{
                        label: "堆垛机",
                        code: "1",
                        type:2,
                    },{
                        label: "RGV",
                        code: "2",
                        type:2,
                    },{
                        label: "升降机",
                        code: "3",
                        type:2,
                    },{
                        label: "输送机",
                        code: "4",
                        type:2,
                    },{
                        label: "拆-叠盘机",
                        code: "5",
                        type:2,
                    },{
                        label: "机器人",
                        code: "6",
                        type:2,
                    },{
                        label: "旋转站台",
                        code: "7",
                        type:2,
                    },{
                        label: "字母车",
                        code: "8",
                        type:2,
                    },{
                        label: "AGV",
                        code: "9",
                        type:2,
                    }
                ],
                banners: [
                    { src:require("../assets/banner/productcenter/产品中心.jpg")},
                    { src:require("../assets/banner/productcenter/产品中心.jpg")},
                    { src:require("../assets/banner/productcenter/产品中心.jpg")},
                ],
                numbers: [],
                pageData: {
                    page: 1,
                    limit: 12,
                    total: 0
                },
                type: "",
                detailHidden: true,
                form: {
                    id: null,
                    // image: null,
                    // cover: null,
                    title: null,
                    type: null,
                    images:[],
                    dateTime: null,
                    content: null,
                    upForm: null,
                    bottomForm: null
                },
                imgCurrent:0
            };
        },
        watch: {
            $route: "setActiceName"
        },
        methods: {
            automatecontent1(number){
                // console.log(number);
                // const numRowsWithThreeItems = Math.floor(number / 3); // 计算满足三个一行的行数
                const remainingItems = number % 3; // 计算余数
                if (remainingItems === 0 || remainingItems === 2) {
                    // 余数为0或2，每行三个
                    // for (let i = 0; i < numRowsWithThreeItems; i++) {
                    //   result.push(array.slice(i * 3, (i + 1) * 3));
                    // }
                    return this.isSpecial = 'odd-style'
                } else if (remainingItems === 1) {
                    // 余数为1，每行两个
                    // const result = [];
                    // for (let i = 0; i < numRowsWithThreeItems; i++) {
                    //   result.push(array.slice(i * 3, (i + 1) * 3));
                    // }
                    // 添加最后一行的一个元素
                    // result.push(array.slice(numRowsWithThreeItems * 3));
                    return this.isSpecial = 'even-style'
                }
                // else {
                // // 余数为3，每行三个
                //   return array;
                // }


                // return {
                //   "automate-content1":this.getstyle(),
                // }
            },
            // getstyle(){
            //   this.isSpecial ? 'odd-style' : 'even-style';
            // },
            handleClick(tab, event) {
                this.detailHidden = true;
                if(tab.name.indexOf("-")>-1){
                    var str = tab.name.split("-");
                    this.type = str[0]+'-'+str[1];
                }
                this.listPhoto();
            },
            setActiceName() {
                var url = window.location.href;
                if (url.indexOf("?") > -1) {
                    if(url.split("?")[1].indexOf("-")>-1){
                        var str = url.split("?")[1].split("-");
                        this.activeName = str[0]+'-'+str[1];
                        this.type = str[0]+'-'+str[1];
                    }
                }
                this.listPhoto();
            },
            setBanners() {
                //设置轮播图
                this.$store.commit("setBanners", this.banners);
            },
            changeIsShow() {
                this.isshow = !this.isshow;
            },
            handoff(code) {
            },
            listPhoto() {
                this.numbers = [
                    {
                        type: "1-1",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/08/01/88723f91-3336-4651-90af-8c5ce631d8d4.jpeg",
                        text: "海湾化学",
                        numbersNext: {
                            id: 2,
                            title: "海湾化学",
                            dateTime: new Date("2023-8-1"),
                            content: "<h3><a id=\"_0\"></a>项目简介</h3> <p><strong>现场描述</strong><br /> 入/出库站台83个，环型轨道周长为610米；RGV总数为21台。<br /> <br /><br /> <strong>满足效率</strong><br /> 出302托/小时，入292拖/小时<br /> <br /><br /> <strong>技术指标</strong><br /> RGV移栽速度：20m/min；RGV直道行走速度： 160m/min；RGV弯道行走速度： 40m/min；RGV行走加速度：0.6m/sec2。<br /> <br /></p> <h3><a id=\"L_11\"></a>海湾化学L形环穿暂停区和小环</h3> <p>1、暂停区：需要设置手动模式和自动模式，前台需要设置选择手动模式还是自动模式界面<br /> <br /><br /> 2、小环RGV流量控制：需要设置手动模式和自动模式，手工模式：设置小环需要的空车数，自动模式：系统按照一定的算法规则来调配小环和大环的空车数量。<br /> <br /><br /> 3、走大环还是小环的控制问题：上位机设置是电气控制还是调度控制（暂定调度上设置模式，电气控制模式和调度控制模式，若选择电气控制模式则该Dint默认写0，若选择调度控制模式则该Dint需要给出走大环或者走小环的标识，刚分任务时默认走小环，当到达岔道一定的距离时，通过调度算法计算再决定走大环还是走小环）</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/08/01/88723f91-3336-4651-90af-8c5ce631d8d4.jpeg",
                            ],
                        }
                    },{
                        type: "1-1",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/08/01/358eb299-b5f1-4b4a-94ae-78ab8a3ccb00.jpeg",
                        text: "辉山乳业",
                        numbersNext: {
                            id: 3,
                            title: "辉山乳业",
                            dateTime: new Date("2023-8-1"),
                            content: "<p><strong>系统概述</strong><br /> 电气控制系统实现对 STV 小车的控制。系统接收调度计算机的搬运指令，控<br /> 制 STV 小车的驱动。完成物料搬运及输送。系统提供人机操作界面、安全保护措<br /> 施和多种操作模式，辅助操作人员进行设备操作和维护。<br /> <br /><br /> <strong>主要技术指标</strong><br /> 供电要求：<br /> 动力电源：380VAC±10％，50HZ±1HZ，三相五线制；<br /> 辅助电源：220VAC±10％，50HZ±1HZ，单相二线制；<br /> 按钮、指示灯电压等级 24VDC；<br /> 检测器件电压等级 24VDC；</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/08/01/361ecf1a-9c48-4a9f-a704-7ae22950045c.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/08/01/358eb299-b5f1-4b4a-94ae-78ab8a3ccb00.jpeg",
                            ],
                        }
                    },{
                        type: "1-1",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/08/01/ab40f1e1-85cf-4316-a40b-cecddd5e632a.jpeg",
                        text: "福建友谊",
                        numbersNext: {
                            id: 1,
                            title: "福建友谊",
                            dateTime: new Date("2023-8-1"),
                            content:"<h3><a id=\"_0\"></a>项目简介</h3> <p><strong>现场描述</strong><br /> 入/出库站台34个，环型轨道周长为150米；RGV总数为7台。<br /> <br /><br /> <strong>满足效率</strong><br /> 出280卷/小时<br /> <br /><br /> <strong>技术指标</strong><br /> RGV移栽速度：20m/min；RGV直道行走速度： 160m/min；RGV弯道行走速度： 40m/min；RGV行走加速度：0.6m/sec2。<br /> <br /></p> <h3><a id=\"_12\"></a>双叉环形穿梭车调度算法设计</h3> <p><strong>1、同取同送</strong><br />         取货途中，若发现后面有空车则取消当前车任务，把任务分配给后面的空车（所分配空车遵循智能选车算 法）<br /> <br /><br /> <strong>2、同取不同送</strong><br />         取货途中，若发现后面有空车则取消当前车任务，把任务分配给后面的空车（所分配空车遵循智能选车算 法）<br /> <br /><br /> <strong>3、不同取同送</strong><br />         空车优先分给同取的任务，如果先是单取，行进途中有双任务出现，则取消单任务，让车去接双任务<br /> <br /><br /> <strong>4、不同取不同送</strong><br />         空车优先分给同取的任务，如果先是单取，行进途中有双任务出现，则取消单任务，让车去接双任务<br /> <br /><br /> <strong>5、单取单送</strong></p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/08/01/ab40f1e1-85cf-4316-a40b-cecddd5e632a.jpeg",
                            ],
                        }
                    },{
                        type: "1-1",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/08/01/cc4f5fce-71a2-4f97-9d3d-f5d2432b8f16.jpeg",
                        text: "重庆氨纶",
                        numbersNext: {
                            id: 4,
                            title: "重庆氨纶",
                            dateTime: new Date("2023-8-1"),
                            content: "<h3><a id=\"_0\"></a>项目简介</h3> <p><strong>现场描述</strong><br /> 立体仓库入/出库站台14个，发货/入库站台10个，环型轨道周长为130米；RGV总数为5台；维修站可同时停靠2台RGV。<br /> <br /><br /> <strong>满足效率</strong><br /> 180托/小时<br /> <br /><br /> <strong>技术指标</strong><br /> RGV移栽速度：20m/min；RGV直道行走速度： 160m/min；RGV弯道行走速度： 40m/min；RGV行走加速度：0.6m/sec2。<br /> <br /></p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/08/01/cc4f5fce-71a2-4f97-9d3d-f5d2432b8f16.jpeg",
                            ],
                        }
                    },{
                        type: "1-3",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/ec6a9625-be86-4c32-9c21-849ec4664793.jpg",
                        text: "四向穿梭车式密集库",
                        numbersNext: {
                            id: 5,
                            title: "四向穿梭车式密集库",
                            dateTime: new Date("2023-9-7"),
                            content: "<p>&nbsp;&nbsp;&nbsp;&nbsp;四向穿梭车系统，主要由系统、密集式货架、四向穿梭车及提升机构成。穿梭车除了在巷道方向行驶外还能跨巷道移动，能够有效提高密集式仓库的作业效率。</p> <h2><a id=\"_2\"></a>产品优势</h2> <ol> <li>仓库容量大，利用率高。</li> <li>无需叉车或堆垛机便能实现穿梭车的换巷道或换层作业。</li> <li>作业方式可选择先入先出或先入后出，但不易实现指定货物出库。</li> <li>四向穿梭车式密集库往往有多台四向穿梭车可同时作业，出入库效率高。</li> </ol> <h2><a id=\"_8\"></a>应用范围</h2> <p>适用于货位需求量大，但品种相对单一的货品存储，如食品饮料、化工、烟草、医药等行业。</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/ec6a9625-be86-4c32-9c21-849ec4664793.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/5e3463d8-727f-4e39-b293-ef43a52cc18a.jpg"
                            ],
                        }
                    },{
                        type: "1-4",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/05/05ef1db7-14e6-4dcd-ac69-5e1f22eca39f.jpg",
                        text: "WMS/WCS智能仓储管理/控制系统",
                        numbersNext: {
                            id: 6,
                            title: "WMS/WCS智能仓储管理/控制系统",
                            dateTime: new Date("2023-9-5"),
                            content:"<h2><a id=\"_0\"></a>信息系统集成与实施–系统功能架构</h2> <p>科讯自主研发的WMS及WCS系统拥有强大的库存管理功能，配合各种智能仓储设备进行高效的出入库盘点等功<br /> 能，强大的二次开发能力能够适应各种复杂的仓库管理流程，以及对接各种上位系统，进行定制开发。配合人工智<br /> 能AI，机器学习和大数据分析，对库存的出入库数据进行智能分析，获取货物最佳货位，最大程度提高出入库效<br /> 率，通过大数据分析，统计货物的使用频率，库存停滞情况，给到管理人员最优的库存结构报表，从而加强其库存<br /> 管理，并采取相应的降低库存措施，能有效节约库存成本。</p> <h2><a id=\"_8\"></a>产品优势</h2> <ol> <li><strong>优秀的软件框架</strong>：快速适应客户需求变更；支持多终端操作（PC、手机等）。</li> <li><strong>丰富的软件接口</strong>：能够应对客户不同的上位系统，快速的进行对接开发（DBLink、webservice等）。</li> <li><strong>人工智能大数据算法</strong>：系统深度学习客户出入库的效率获取路径KPI，分析最优路径；利用大数据算法分析最优货位，以达到出入库效率的最大化</li> <li><strong>成熟的通讯协议</strong>：采用稳定高效的通讯方式，使通讯更加快捷、灵活，基于科讯强大的软件和电气团队，自定义通讯协议经过多个项目的验证，通讯稳定，可靠。</li> </ol>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/05/05ef1db7-14e6-4dcd-ac69-5e1f22eca39f.jpg",
                            ],
                        }
                    },{
                        type: "2-1",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/aa08c208-8f3e-41d8-9d20-1e9eb8efa3fa.jpg",
                        text: "单深位堆垛机立体仓库",
                        numbersNext: {
                            id: 7,
                            title: "单深位堆垛机立体仓库",
                            dateTime: new Date("2023-9-7"),
                            content:"\n" +
                                "<p>    单深位堆垛机立体仓库，由横梁式或牛腿式货架、堆垛机及输送系统等设备组成具有使用灵活，作业效率高等优势。</p> <h2><a id=\"_2\"></a>产品优势</h2> <ol> <li>节约库房占地面积，充分利用仓库高度空间。</li> <li>作业灵活，在仓储作业模式中，可实现先入先出、先入后出或任意货物出库。</li> <li>仓库可多台堆垛机同时执行出入库作业，作业效率高。</li> <li>设备成熟，故障率低，运行稳定性高。</li> </ol> <h2><a id=\"_8\"></a>应用范围</h2> <p>堆垛机式立体仓库通用型较强，可广泛应用于各行各业。如：粮油行业、食品饮料行业、医药行业、化工行业、造纸行业等。</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/aa08c208-8f3e-41d8-9d20-1e9eb8efa3fa.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/05ece426-bfb8-4c3b-b18d-065e5748acd5.jpg"
                            ],
                        }
                    },{
                        type: "2-1",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/eaf533ec-aaf4-4259-b422-b94d0eb670cc.jpg",
                        text: "双深位堆垛机立体仓库",
                        numbersNext: {
                            id: 8,
                            title: "双深位堆垛机立体仓库",
                            dateTime: new Date("2023-9-7"),
                            content:"<p>    双深位堆垛机立体仓库相比一台堆垛机能够兼顾四排货架，同样大小的库区内能够有效降低堆垛机的数量从而降低仓库造价。但效率略低于单深位堆垛机立体仓库。</p> <h2><a id=\"_2\"></a>产品优势</h2> <ol> <li>节约库房占地面积，充分利用仓库高度空间。</li> <li>作业灵活，在仓储作业模式中，可实现先入先出、先入后出或任意货物出库。</li> <li>作业效率略低于单伸位堆垛机立体仓库。</li> <li>由于有效的减少了堆垛机的数量，仓库造价更低。</li> </ol> <h2><a id=\"_8\"></a>应用范围</h2> <p>双深位堆垛机立体仓库与单伸位堆垛机立体仓库同样具有较强的通用型，适用于各行各业。</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/382bf3d6-0ee6-4e11-ba28-769cc87e8975.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/eaf533ec-aaf4-4259-b422-b94d0eb670cc.jpg"
                            ],
                        }
                    },{
                        type: "2-1",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/a6d3cbe1-083e-47ef-8861-47520677a5a9.jpg",
                        text: "Miniload堆垛机立体仓库",
                        numbersNext: {
                            id: 9,
                            title: "Miniload堆垛机立体仓库",
                            dateTime: new Date("2023-9-7"),
                            content:"\n" +
                                "<p>    Miniload堆垛机立体仓库，主要由miniload堆垛机、料箱货架及输送系统组成，具有轻载高效的特点。</p> <h2><a id=\"_2\"></a>产品优势</h2> <ol> <li>堆垛机运行速度快，出入库作业效率高。</li> <li>负载较轻，负载一般小于50kg。</li> <li>作业模式灵活，能够做到任意货物出入库或拆零拣选出库。</li> </ol> <h2><a id=\"_7\"></a>应用范围</h2> <p>主要应用在电子、电商等负载小，效率要求高的行业。</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/a6d3cbe1-083e-47ef-8861-47520677a5a9.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/009deb15-b1b2-4be8-98c7-82489294a497.jpg"
                            ],
                        }
                    },{
                        type: "2-9",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/05/d9c5e249-cebb-46a4-bc0d-8405e67606e8.jpg",
                        text: "智能叉车AGV",
                        numbersNext: {
                            id: 10,
                            title: "智能叉车AGV",
                            dateTime: new Date("2023-9-5"),
                            content:"<h2><a id=\"_0\"></a>产品优势</h2> <p>叉车式AGV可适用于不同高度的载货位，在无需特殊载具的情况下实现货物泊接。科讯叉车式AGV可实现自动分配<br /> 任务、自动承载托盘完成升降搬运工作，以实现车间自动化。具有全面完整的安全防护机制，能够做到行驶方向、<br /> 叉齿运动方向，侧转向方向的全方向防护。</p> <h2><a id=\"_6\"></a>导航模式</h2> <p>科讯AGV系列产品均支持个性定制，同时可选择二维码导航、磁条导航、激光SLAM（有反、无反）三种导航方式</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/05/d9c5e249-cebb-46a4-bc0d-8405e67606e8.jpg",
                            ],
                        }
                    },{
                        type: "2-2",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/b5c300b7-11d2-4e03-b961-337d1c786432.jpg",
                        text: "RGV",
                        numbersNext: {
                            id: 11,
                            title: "RGV",
                            dateTime: new Date("2023-9-7"),
                            content:"<p>托盘RGV穿梭车广泛应用于烟草、医药、食品等行业，实现密集式存储立体仓库中的整托盘货物的自动搬运，实现托盘货物的快速移载运输，慢速不同区域功能分区内货物的出入库。</p> <p>在PLC系统控制下，通过条码定位控制方式精确定位各取货口，进行货物的链条输送移载，并根据上位机指令运送至指定端口，进行仓储出入库。</p> <p>在工厂内，轨道车（Rail Guided Vehicle，简称RGV）具有许多优势，这些优势使它们在现代制造业中得到广泛应用。以下是元腾智能RGV在工厂内的一些优势：</p> <ol> <li> <p>自动化和智能化：RGV通常是自动控制自主导航的，可以通过预设的路径和程序来执行任务。这种自动化能力减少了对人工操作的需求，提高了生产效率并降低了人力成本。</p> </li> <li> <p>准确和精确：由于RGV沿着固定的轨道移动，它们能够准确地将物料或产品从一个地点运输到另一个地点，避免了人为操作中的误差。</p> </li> <li> <p>高效运输：RGV可以以相对较高的速度移动，从而加快物料和产品的运输速度。这对于流水线生产和快节奏的制造过程非常重要。</p> </li> <li> <p>灵活性：尽管RGV沿着固定的轨道移动，但它们的路径可以预先设定，并且可以灵活地进行调整，以适应生产线的布局变化。</p> </li> <li> <p>节省空间：由于RGV沿着固定轨道行驶，它们不需要像其他交通工具那样需要额外的空间来转弯，这在狭小的工厂环境中非常有优势。</p> </li> <li> <p>安全性：RGV的自动化特性和固定轨道的使用可以降低事故和碰撞的风险，提高工作场所的安全性。</p> </li> <li> <p>数据收集和监控：现代RGV通常配备有传感器和数据收集系统，可以实时监控其运行状态和性能。这些数据有助于优化生产流程并进行预防性维护。</p> </li> <li> <p>扩展性：可以根据工厂的需求增加或减少RGV的数量，从而方便地扩展生产能力。</p> </li> </ol> <p>总体而言，轨道车在工厂内的优势在于提高生产效率、精确运输物料和产品、降低人力成本并增强工作场所的安全性。它们是现代制造业中关键的物流自动化解决方案之一。</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/b5c300b7-11d2-4e03-b961-337d1c786432.jpg",
                            ],
                        }
                    },{
                        type: "2-3",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/40e7212c-629b-483c-b720-527f2450a452.jpg",
                        text: "升降机",
                        numbersNext: {
                            id: 12,
                            title: "升降机",
                            dateTime: new Date("2023-9-7"),
                            content:"\n" +
                                "<p><strong>产品特点:</strong></p> <ul> <li>采用高强度板式链条带动起升稳定，安全可靠;</li> <li>采用SSI电气集成技术及施耐德电气线束减少，检修方便，安全可靠;采用品牌液压系统保养简便，安全可靠;</li> <li>采用高压防爆钢丝油管保障安全;</li> <li>采用低压控制系统安全低压，上下呼梯，急停保护;采用超载保护系统保障安全，保护设备，确保无忧;采用防坠保护系统安全升级，确保无忧;</li> </ul>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/40e7212c-629b-483c-b720-527f2450a452.jpg",
                            ],
                        }
                    },{
                        type: "2-4",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/f7a2381e-962a-451d-b391-ed6920bcf6e5.jpg",
                        text: "箱式输送设备",
                        numbersNext: {
                            id: 13,
                            title: "箱式输送设备",
                            dateTime: new Date("2023-9-7"),
                            content:"<h2><a id=\"_0\"></a>产品优势</h2> <p>高效运输纸箱、周转箱和包裹。对于料箱，纸箱等重量一般小于50kg的轻型物料输送系统一般称为箱式输送线。箱式输送线一般根据物流工艺流程布置各种类型的输送设备。常用的设备大致分为四大类：平面输送系列、垂直输送系列、分拣系列、专机系列等。</p> <ul> <li>平面输送系列：辊筒输送机、皮带输送机、链条机、倍速链、模块带输送等</li> <li>垂直输送系列：连续提升机、往复提升机、螺旋提升机等</li> <li>分拣系类：窄带顶升移载机、链式顶升移载机、斜轮顶升分拣机、摆轮分拣机等</li> <li>专机系列：自动开箱机、自动贴标机、拆码垛工作站等等，同时根据不同客户不同需求非标开发各种各样专机设备</li> </ul>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/f7a2381e-962a-451d-b391-ed6920bcf6e5.jpg",
                            ],
                        }
                    },{
                        type: "2-4",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/943324d9-5b47-4430-9bd5-858684e2b245.jpg",
                        text: "托盘输送设备",
                        numbersNext: {
                            id: 14,
                            title: "托盘输送设备",
                            dateTime: new Date("2023-9-7"),
                            content:"\n" +
                                "<h2><a id=\"_0\"></a>产品优势</h2> <p>以托盘为承载单元，载荷较大的输送机系统对于托盘类物料单元的输送系统一般称为托盘输送线。托盘输送线一般根据物流工艺流程布置各种类型的输送设备。常用的设备分为大致分为四大类：平面输送系列、垂直输送系列、分拣系列、专机系列等。</p> <ul> <li>平面输送系列：辊筒输送机、链条输送机、旋转台、链板输送机等</li> <li>垂直输送系列：往复提升机</li> <li>分拣系类：顶升移载机</li> <li>专机系列：叠盘机、拆盘机、合盘机等等，同时根据不同客户不同需求非标开发<br /> 各种各样专机设备</li> </ul>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/943324d9-5b47-4430-9bd5-858684e2b245.jpg",
                            ],
                        }
                    },{
                        type: "2-6",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/9f17bee7-1124-4cb1-bd0b-4c57cba4aa45.jpg",
                        text: "四向穿梭车",
                        numbersNext: {
                            id: 15,
                            title: "四向穿梭车",
                            dateTime: new Date("2023-9-7"),
                            content:"<h2><a id=\"_0\"></a>产品优势</h2> <p>哈工科讯自主研发的智能机器人——四向穿梭车，被广泛应用于各行业的物料存储系统，以及线边物流中。超级电容供电方式提高了设备对能源的利用率。在智能立体库中可以实现跨巷道作业，以及设备间互为备份，赋予项目布局极大的灵活性及多样性。</p> <ul> <li>节能：采用能量回收系统，主供电采用超级电容，可反复充放电100万次。</li> <li>安全：通过CE认证，采用实时监控管理，搭载防撞系统，达到提前预警。</li> <li>精准：采用高精度光电，准确探测定位点。定位精度可达±1mm</li> <li>智能：系统智能调度，预设最优路径。所有穿梭车互为备份保障仓储的连续性。</li> <li>标准：穿梭车所有部件采用全球工业标准，备件维修更为便捷。</li> </ul>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/9f17bee7-1124-4cb1-bd0b-4c57cba4aa45.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/9f62e496-9a5e-4842-a430-3ecb5f5ca758.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/d630aba5-e5b0-4042-b9d6-6c96241b7899.jpg"
                            ],
                        }
                    },{
                        type: "2-6",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/3a66ef49-62b4-448d-b935-0ad9afc390d6.jpg",
                        text: "机器人码垛系统",
                        numbersNext: {
                            id: 16,
                            title: "机器人码垛系统",
                            dateTime: new Date("2023-9-7"),
                            content:"\n" +
                                "<h2><a id=\"_0\"></a>产品优势</h2> <p>科讯为各行业客户提供安全高效、性价比高的混合码垛解决方案，这种创新的码垛解决方案具备高度模块化的设计。它将机器人拆码垛方案与箱式穿梭车技术结合起来，主要包括机械臂、多功能夹具、物料搬运设备等，使其在仓储系统控制下实现全自动化流程。</p> <p>根据视觉系统分辨不同的商品种类和类别， 在仓库管理系统发出码垛顺序之前，人工智能算法便根据产品参数自主执行复杂的计算过程，来决定装载托盘的最佳方式，最终实现同时将不同包装尺寸的产品有序的自动码垛到托盘上，货物拣选的速度提升为传统方式的2倍或3倍。</p> <ul> <li>可处理多规格的货品：可配置多种夹具、多机械臂，灵活处理各种规格货物的自动码垛</li> <li>业务处理性能优越：可以集成在任何生产线中，提高拣货质量，降低履单错误率</li> <li>灵活满足客户需要：可按需定制，配备全自动流程，具备长期竞争力</li> </ul>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/3a66ef49-62b4-448d-b935-0ad9afc390d6.jpg",
                            ],
                        }
                    },{
                        type: "1-2",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/4a22b2c9-eaf6-4be9-bf17-798bce19830d.jpg",
                        text: "高速分拣系统",
                        numbersNext: {
                            id: 17,
                            title: "高速分拣系统",
                            dateTime: new Date("2023-9-7"),
                            content:"<p><strong>一、分拣系统的作用</strong></p> <p>1、有效提高物流系统的效率：分拣系统的出现，不仅可以大大减少人工运作的工作量，而且能够提高运作的效率，从而提升系统的整体效率;</p> <p>2、提高物流系统的准确性：分拣系统能够以准确的方式进行分拣，从而降低分拣错误的可能性，提高物流系统的准确性;</p> <p>3、可以实现多种分拣方式：分拣系统支持的多种分拣方式，可以满足不同的分拣需求，使分拣更加灵活;</p> <p>4、可以节省时间：分拣系统比人工分拣更快，能够有效的节省时间;</p> <p>5、可以节省物流成本：分拣系统可以减少人工分拣的成本，可以有效的降低物流成本;</p> <p>6、可以提升物流服务质量：分拣系统可以保证分拣准确，减少分拣错误，从而提升物流服务质量。</p> <h2><a id=\"_14\"></a>分拣系统</h2> <p><strong>二、分拣系统的结构</strong></p> <p>1、分拣机：分拣机是分拣系统的核心组件，主要负责对货物进行分拣;</p> <p>2、智能控制系统：智能控制系统是连接各个组件的软件，可以实现对分拣系统的统一控制;</p> <p>3、分拣模块：分拣模块是用于实现货物的分拣的核心，可以根据货物的不同属性进行分拣;</p> <p>4、货物输送系统：货物输送系统主要用于货物在整个系统中的运行，由多种模块组成;</p> <p>5、外设设备：外设设备是用于实现系统操作的设备，可以为系统提供更多可操作性;</p> <p>6、检测设备：检测设备是用于检测货物的属性，比如重量、体积等，以便进行精确的分拣。</p> <p><strong>三、分拣系统的应用</strong></p> <p>1、零售行业：零售行业的分拣系统可以有效的提升货物的准确性和效率，可以满足不同的货物订单;</p> <p>2、物流行业：物流行业可以利用分拣系统实现快递分拣，从而提高整体的物流效率;</p> <p>3、网络购物：网络购物利用分拣系统实现快速的货物分拣，从而提高货物的发货效率;</p> <p>4、食品行业：食品行业可以利用分拣系统实现食品的分拣，从而提高食品的分拣效率;</p> <p>5、服装行业：服装行业可以利用分拣系统实现服装的分拣，从而提高服装的分拣效率;</p> <p>6、汽车行业：汽车行业可以利用分拣系统实现零件的分拣，从而提高零件的分拣效率。</p> <p><strong>四、分拣系统的优势</strong></p> <p>1、节省人力成本：分拣系统可以减少人工分拣的工作量，有效的节省企业的人力成本;</p> <p>2、提高分拣效率：分拣系统比人工分拣更快，能够有效的提高分拣效率;</p> <p>3、减少分拣错误：分拣系统能够以准确的方式进行分拣，从而降低分拣错误的可能性;</p> <p>4、提升物流服务质量：分拣系统可以保证分拣准确，减少分拣错误，从而提升物流服务质量;</p> <p>5、支持多种分拣方式：分拣系统支持的多种分拣方式，可以满足不同的分拣需求，使分拣更加灵活;</p> <p>6、可以节省物流成本：分拣系统可以减少人工分拣的成本，可以有效的降低物流成本。</p> <p><strong>五、分拣系统的缺点</strong></p> <p>1、投资成本较高：分拣系统的设备、软件、结构设计等投资成本较高，企业需要考虑投资的可行性;</p> <p>2、设备维护成本较高：分拣系统包含多种设备，其维护成本比较高，企业需要进行维护成本预算;</p> <p>3、受环境影响较大：分拣系统需要在较低温度、湿度、噪音等环境条件下运行，受环境影响较大;</p> <p>4、需要定期更新：分拣系统需要定期更新，以保持其功能的稳定性，企业需要定期更新;</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/4a22b2c9-eaf6-4be9-bf17-798bce19830d.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/239a5363-b696-4d19-a594-f23e88587f59.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/9036a882-132e-4b0b-897d-f93a5d032634.jpg"
                            ],
                        }
                    },{
                        type: "2-5",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/c6e23ecf-1b3a-4950-96ae-e9b195ea45ca.jpg",
                        text: "拆盘机",
                        numbersNext: {
                            id: 18,
                            title: "拆盘机",
                            dateTime: new Date("2023-9-7"),
                            content:"<p>首个托盘进入拆/叠盘机到位后，升降台将托盘升至最高位，两侧拨叉伸出，升降台下降，将托盘放至拨叉上。待下一托盘进入拆/叠盘机并定位后，升降台将托盘连同拨叉上托盘升起一定距离（升降台上升至中间位），两侧拨叉收回，升降台再上升至最高位，两侧拨叉伸出，升降台下降至最低位，将托盘放至拨叉上，完成第二个托盘的码盘。</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/c6e23ecf-1b3a-4950-96ae-e9b195ea45ca.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/bb335534-df2a-4dfd-bf25-ac759e839195.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/37f3872b-ba03-483d-992b-60b7dea9b923.jpg"
                            ],
                        }
                    },{
                        type: "2-8",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/ec5ef8b2-7fa0-42b1-a3a9-a84b89552692.jpg",
                        text: "字母车",
                        numbersNext: {
                            id: 18,
                            title: "字母车",
                            dateTime: new Date("2023-9-7"),
                            content:"<h2><a id=\"_0\"></a>子母穿梭车构成</h2> <p>子母式穿梭车是由双向的子穿梭车和母穿梭车以及轨道、轨道贯通式密集货架、往复升降机、换层提升机、行走巷道、货品巷道、入库输送线、出库输送线、计算机控制系统等构成。</p> <h2><a id=\"_3\"></a>子母穿梭车主要工作原理</h2> <p>入库：在入库方面，WMS仓库管理系统会接收到入库货物信息后，再结合货物的特性会自动分配货位并生成入库的运行指令，然后WCS控制系统会调度相关的设备将货物自动送到指定的位置；</p> <p>出库：WMS仓库系统接收到出库货物信息后；根据储存货物的位置并生成出库指令，通过WCS控制系统调度相关设备将货物自动送到出库端；</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/ec5ef8b2-7fa0-42b1-a3a9-a84b89552692.jpg",
                            ],
                        }
                    },{
                        type: "2-7",
                        src: "http://8.130.94.42:8080/hgkx/image/2023/09/07/7209d498-901d-428c-baf1-3a8eb4bce53b.jpg",
                        text: "旋转站台",
                        numbersNext: {
                            id: 19,
                            title: "旋转站台",
                            dateTime: new Date("2023-9-7"),
                            content:"<p>旋转站台在仓储领域中有着广泛的应用。它们通常被用于提高仓库的存储能力和效率。旋转站台的一个主要优点是能够快速地将货物从仓库的一个地方转移到另一个地方。这有助于减少运输时间和成本，并提高整体运营效率。</p> <p>旋转站台的设计也有所不同，有些设计可能更适合某些特定的应用场景。例如，一些旋转站台可能具有更高的承载能力，适用于运输重型货物。而其他一些旋转站台可能更小巧，适用于在紧凑的空间内操作。</p>",
                            images:[
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/7209d498-901d-428c-baf1-3a8eb4bce53b.jpg",
                                "http://8.130.94.42:8080/hgkx/image/2023/09/07/3fd0f431-4bd8-48f7-bea4-3731bf6fa612.jpg",
                            ],
                        }
                    },
                ];
                var listType=null;
                var listId=null;
                if(this.type!="" && this.type.indexOf("-")>-1){
                    var str = this.type.split("-");
                    listType = str[0]+'-'+str[1];
                }
                if (listType != null) {
                    this.numbers = this.numbers.filter(item => item.type == listType);
                }
                this.pageData.total = this.numbers.length;
                var indexPage = (this.pageData.page - 1) * this.pageData.limit;
                this.numbers = this.numbers.slice(
                    indexPage,
                    this.pageData.limit + indexPage
                );
            },
            handelPage(val) {
                //console.log(val);
                this.pageData.page = val;
                this.listPhoto();
            },
            //详情页
            showDetails(id) {
                if (id == null) {
                    return;
                }
                // console.log(id)
                var numbers = this.numbers;
                this.detailHidden = false;
                this.form = JSON.parse(
                    JSON.stringify(numbers.filter(item => item.numbersNext.id == id)[0].numbersNext)
                );
                numbers.forEach((item, index) => {
                    if (id == item.numbersNext.id) {
                        if (index == 0) {
                            this.form.upForm = null;
                            this.form.bottomForm = numbers[index + 1];
                        }
                        if (index == this.numbers.length - 1) {
                            this.form.upForm = numbers[index - 1];
                            this.form.bottomForm = null;
                        }
                        if (index != 0 && index != this.numbers.length - 1) {
                            this.form.upForm = numbers[index - 1];
                            this.form.bottomForm = numbers[index + 1];
                        }
                    }
                });
            },
            //设置详情轮播
            imageChange(current,original){
                this.imgCurrent=current;
            },
        },
        mounted() {
            this.setBanners();
            this.setActiceName();
            this.listPhoto();
        },
        components: {
            Banner
        }
    };
</script>
<style scoped>
  .content{
    width: 100%;
    height: 100%;
  }
  /* 'odd-style' : 'even-style'; */
  .automate-content {
    width: 100%;
    height: 100%;
    background-color: rgb(245, 245, 245);
    /* border: 1px solid red; */
  }
  .automate-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid green; */
  }
  .odd-style {
    width: 33%;
    height: 100%;
    /* margin: 0 auto; */
    text-align: center;
    /* margin-right: 0.3%; */
    /* justify-content: space-around; */
  }
  .even-style{
    width: 50%;
    height: 100%;
    /* margin: 0 auto; */
    text-align: center;
    /* margin-right: 0.3%; */
    /* justify-content: space-around; */
  }
  .automate-fenyeqi {
    text-align: center;
  }

  .item{
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .item-border{
    width: 80%;
    height: 85%;
    /* border: 1px solid blue; */
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: rgb(255, 255, 255);
    /* overflow: hidden; */
  }
  .item-border:hover .item-img{
    transform: scale(1.2);
  }
  .item-border:hover .item-word{
    color: #fff;
    background-color: rgb(64, 158, 255);
  }
  .item-border > a:first-child{
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio:16/9;
    max-width: 100%;
    /* height: 15%; */
    /* border: 1px solid yellow; */
  }
  .item-img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .8s;
    /* margin-top: 3%; */
  }
  .item-word {
    font-size: 16px;
    color: black;
    font-weight: bold ;
    display: inline-block;
    text-align: center;
    display: -webkit-box;   /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 1;  /*设置多少行*/
    -webkit-box-orient: vertical;   /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
    overflow: hidden;   /*文本会被修剪，并且剩余的部分不可见*/
    text-overflow: ellipsis;   /*显示省略号来代表被修剪的文本*/
  }

  @media screen and (max-width: 991px) {
    .automate-content {
      justify-content: space-between;
    }
    /* 'odd-style' : 'even-style'; */
    .odd-style,.even-style {
      width: 50%;
      height: 100%;
      /* display: flex; */
      /* margin: 0 auto; */
      text-align: center;
      /* margin-right: 0.3%; */
      /* justify-content: space-around; */
    }
  }
  .tabs {
    font-size: 30px !important;
    padding-left: 1%;
    padding-right: 1%;
    margin: 0;
    background-color: #ffffff;
  }
  div /deep/ .el-tabs__item {
    font-size: 16px !important;
  }
  .content {
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }


  .div-center {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    /* border: 1px solid red; */
    /* background-color: rgb(226, 214, 214); */
  }
  h3 {
    color: #409eff;
    padding: 20px;
    margin-left: 7%;
  }

  @media screen and (max-width: 768px){
    .details-content-left{
      text-align: center;
      display: inline-block;
    }
    .details-content-right{
      padding: 10px;
      display: inline-block;
      text-align: left;
      /*float: right;*/
    }
  }
  @media screen and (min-width: 768px){
    .details-content-left{
      width: 45%;
      display: inline-block;
      text-align: center;
      vertical-align: top;
    }
    .details-content-right{
      width: 45%;
      padding: 10px;
      display: inline-block;
      text-align: left;
      margin-left: 30px;
      /*float: right;*/
    }
  }
  .page-left{
    float: left;
  }
  .page-right{
    float: right;
  }
  .div-page{
    height: 50px;
    padding-top: 25px;
  }
  .a-page{
    color: black;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
  }
  a:hover {
    color: #409EFF;
  }
  .image-pro{
    aspect-ratio:1/1;
    max-width: 100%;
  }
  .image-pro-img{
    width: 80%;
  }
  .content-details{
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  @media screen and (max-width: 641px){
    .item-word{
      width:100%; /*宽度一定要设置*/
      overflow: hidden; /*文本超出隐藏*/
      text-overflow: ellipsis; /*文本超出显示省略号*/
      white-space: nowrap; /*超出的空白区域不换行*/
    }
  }
  @media screen and (max-width: 1146px){
    .item-word{
      /* font-style: 14px; */
      font-size: 14px;
    }
  }
  @media (max-width: 1146px) and (max-width: 1008px){
    .item-word{
      /* font-style: 14px; */
      font-size: 12px;
    }
  }
</style>
